import { useEffect, useState } from "react";
import styles from "./index.module.scss";
import LinkTitle from "@/components/LinkTitle";
import MusicList from "@/components/MusicList";
import { Loading } from "react-vant";
import { getSongList } from "@/api/discover/songList/index";
const Ranking = () => {
  const [list, setlist] = useState<songList[]>([]);
  useEffect(() => {
    getSongList(9).then((res) => {
      setTimeout(() => {
        setlist(res);
      }, 500);
    });
    return () => {};
  }, []);

  return (
    <div className={styles.SongList}>
      <LinkTitle title={"排行榜"} router={"songlist"} />
      {list.length ? (
        <MusicList data={list}></MusicList>
      ) : (
        <div className={styles.loading_wrap}>
          <Loading color="red" />
        </div>
      )}
    </div>
  );
};

export default Ranking;
